<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">

    <title>Insert title here</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            font-family: JetBrains Mono Medium;
            display: flex;
            align-items: center;
            justify-content: center;
            /* background-color: #0e92b3; */
            background: url('/static/img/backiee-102533-landscape.jpg') no-repeat;
            background-size: 100% 100%;
        }

        .form-wrapper {
            width: 300px;
            background-color: rgba(41, 45, 62, .8);
            color: #fff;
            border-radius: 2px;
            padding: 50px;
        }

        .form-wrapper .header {
            text-align: center;
            font-size: 35px;
            text-transform: uppercase;
            line-height: 100px;
        }

        .form-wrapper .input-wrapper input {
            background-color: rgb(41, 45, 62);
            border: 0;
            width: 100%;
            text-align: center;
            font-size: 15px;
            color: #fff;
            outline: none;
        }

        .form-wrapper .input-wrapper input::placeholder {
            text-transform: uppercase;
        }

        .form-wrapper .input-wrapper .border-wrapper {
            background-image: linear-gradient(to right, #e8198b, #0eb4dd);
            width: 100%;
            height: 50px;
            margin-bottom: 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .form-wrapper .input-wrapper .border-wrapper .border-item {
            height: calc(100% - 4px);
            width: calc(100% - 4px);
            border-radius: 30px;
        }

        .form-wrapper .action {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .form-wrapper .action .btn {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
        }

        .form-wrapper .action .btn:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }

        .form-wrapper .icon-wrapper {
            text-align: center;
            width: 60%;
            margin: 0 auto;
            margin-top: 20px;
            border-top: 1px dashed rgb(146, 146, 146);
            padding: 20px;
        }

        .form-wrapper .icon-wrapper i {
            font-size: 20px;
            color: rgb(187, 187, 187);
            cursor: pointer;
            border: 1px solid #fff;
            padding: 5px;
            border-radius: 20px;
        }

        .form-wrapper .icon-wrapper i:hover {
            background-color: #0e92b3;
        }
    </style>
</head>
<body>

<div class="form-wrapper">
    <div class="header">
        用户登录
    </div>
    <%--<form method="post" action="${ctxPath}/user/login">--%>
    <form>
        <div class="input-wrapper">
            <div class="border-wrapper">
                <input type="text" id="username" name="username" placeholder="username" class="border-item"
                       autocomplete="off">
            </div>
            <div class="border-wrapper">
                <input type="password" id="password" name="password" placeholder="password" class="border-item"
                       autocomplete="off">
            </div>
        </div>

        <span id="errMsg" style="color:red; text-align: center;"></span><br/>

        <div class="action">
            <div class="btn" onclick="doSubmit();">login</div>
        </div>

        <%--<div class="action">--%>
        <%--<input class="btn" type="submit" value="login">--%>
        <%--</div>--%>

    </form>
</div>
</body>
</html>
<script src="${ctxPath}/static/js/jquery-1.11.1.min.js"></script>
<script src="${ctxPath}/static/js/md5.js"></script>
<script>
    function doSubmit() {
        //前端密码加密，使用的是一层32位md5加密
        var _md5Pass = hex_md5($("#password").val());
        var _url = '${ctxPath}/user/login';
        $.ajax(
            {
                url: _url,
                type: 'post',
                data: {
                    username: $("#username").val(),
                    password: _md5Pass
                },
                dataType: 'json',
                success: function (respTxt) {
                    var ret = respTxt.result;
                    if (ret == 'success') {
                        //{ps}前端浏览器跳转到[前端重定向]
                        window.location = '${ctxPath}/user/index';
                    } else {
                        $("#errMsg").text(respTxt.cause);
                    }
                }
            }
        );
    }


    /**
     * @desc 获取url参数
     * @param {String} name  想要获取的参数名字
     */
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }


</script>